import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import moment from 'moment';
import { connect } from 'dva';
import { Modal, Button, Form, Select, Table, Empty, message } from 'antd';
import TPage from '@/modules/TPage';
import Service from '@/public/http/services';
import style from './index.css';
const { Option } = Select;
const { Column } = Table;
const List: React.FC<any> = ({ total, list, dispatch }) => {
  const [curPage, setCurPage] = useState(1);
  const [curOrgName, setCurOrgName] = useState(null);
  const pageSize = 10;
  /**
   * 加载列表数据
   */
  function fetchList({ page, orgName }) {
    dispatch({
      type: 'kindergarten_audit/fetchList',
      payload: {
        page,
        orgName,
        pageSize
      }
    })
  }

  /**
   * @desc 操作完更新列表
   */
  function reFetchList() {
    fetchList({
      page: curPage,
      orgName: curOrgName
    })
  }


  useEffect(({ page = curPage, orgName = curOrgName } = {}) => {
    fetchList({ page, orgName })
  }, [curPage, curOrgName])
  // 渲染列表查询表单
  const handleQuery = (query) => {
    setCurPage(1);
    setCurOrgName(query);
  }

  function renderTableForm() {
    const WrappedForm = Form.create<any>({ name: 'tableForm' })(function ({ form }) {
      const { getFieldDecorator } = form as any;
      return (
        <Form onSubmit={handleQuery.bind(null, form)} layout={'inline'}>

        </Form>
      );
    })
    return (
      <WrappedForm />
    );
  }

  /**
   * @desc 通过
   */
  const handlePass = record => {
    const { id, orgId } = record;
    Modal.confirm({
      title: '审批通过',
      okText: '同意',
      okType: 'primary',
      cancelText: '取消',
      onOk: () => {
        Service.orgAgree({ id, orgId }).then(() => {
          message.info('审批通过');
          reFetchList();
        })
      }
    });

  }

  /**
   * @desc 拒绝
   */
  const handleReject = record => {
    const { id, orgId } = record;
    Modal.confirm({
      title: '审批拒绝',
      okText: '拒绝',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
        Service.orgReject({ id, orgId }).then(() => {
          message.info('审批拒绝');
          reFetchList();
        })
      }
    });
  }

  // 根据渲染类型渲染列表
  const renderActions =
    (record: any) => {
      return (
        record.state === 0 ? <>
          <Button className={style.mr8} type={'primary'} onClick={() => { handlePass(record) }}>通过</Button> :
            <Button className={style.mr8} type={'danger'} onClick={() => { handleReject(record) }}>拒绝</Button>
        </> : null
      );
    }

  return (
    <TPage>
      <TPage.Title>审核</TPage.Title>
      <TPage.Table>
        <TPage.Search
          placeholder={'请输入园所名称，可按回车键搜索'}
          onSearch={handleQuery}
        />
        <TPage.Layout>
          {renderTableForm()}
        </TPage.Layout>
        <Table
          className={classnames(style.mt16, style.audit_list)}
          locale={{ emptyText: <Empty description={'无数据'} /> }}
          dataSource={list}
          pagination={{ total, current: curPage, pageSize, onChange: setCurPage }}
          rowKey={(record: any) => record.orgId}
          scroll={{ x: 1500 }}
        >
          <Column title={'编号ID'} width={64} dataIndex={'orgId'} key={'orgId'} />
          <Column title={'园所名称'} key={'orgName'}
            render={(value, record: any) => {
              return <span className={style.thumbnail}>
                < img src={record.logoPic} />
                {record.orgName}
              </span>
            }}
          />
          <Column title={'审批状态'} dataIndex={'state'} key={'state'}
            render={(value) => value === 1 ?
              <span className={style.success}>已通过</span> : value === 2 ? <span className={style.reject}>已拒绝</span> : <span className={style.primary}>申请中</span>} />
          <Column title={'申请人'} dataIndex={'nickname'} key={'nickname'} />
          <Column title={'董事长手机号'} dataIndex={'tel'} key={'tel'} />
          <Column title={'申请时间'} dataIndex={'applyTime'} key={'applyTime'} render={(value) => moment(value).format('YYYY-MM-DD hh:mm:ss')} />
          <Column title={'更新时间'} dataIndex={'uTime'} key={'uTime'} render={(value) => moment(value).format('YYYY-MM-DD hh:mm:ss')} />
          <Column title={'操作'} key={'act'} render={renderActions} />
        </Table>
      </TPage.Table>
    </TPage>
  );
}
export default connect((state: any) => {
  return {
    list: state.kindergarten_audit.list,
    total: state.kindergarten_audit.total,
  };
})(List);